<template>
  <div class="tax-deduction">
    <h2>2023年加计扣除项目</h2>
    <div class="grid-container">
      <div class="grid-item">
        <span class="icon-check"></span>
        可加计扣除项目数：{{ deductibleItems }}
      </div>
      <div class="grid-item">
        <span class="icon-clock"></span>
        项目正在编制中：{{ itemsInPreparation }}
      </div>
      <div class="grid-item">
        <span class="icon-cross"></span>
        不可加计扣除项目数：{{ nonDeductibleItems }}
      </div>
      <div class="grid-item">
        <span class="icon-circle"></span>
        项目审核中：{{ itemsUnderReview }}
      </div>
      <div class="grid-item">
        <span class="icon-star"></span>
        项目结项数：{{ completedProjects }}
      </div>
      <div class="grid-item">
        <span class="icon-check-circle"></span>
        项目审核通过数：{{ approvedProjects }}
      </div>
      <div class="grid-item">
        <span class="icon-chart"></span>
        项目在研数：{{ ongoingProjects }}
      </div>
      <div class="grid-item">
        <span class="icon-money"></span>
        国税认定额：{{ nationalTaxAmount }} 元
      </div>
      <div class="grid-item">
        <span class="icon-check-circle"></span>
        鉴定通过项目数：{{ certifiedProjects }}
      </div>
      <div class="grid-item">
        <span class="icon-money"></span>
        所得税抵扣额：{{ incomeTaxDeduction }} 元
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaxDeduction',
  data() {
    return {
      deductibleItems: 208,
      itemsInPreparation: 191,
      nonDeductibleItems: 0,
      itemsUnderReview: 3,
      completedProjects: 923,
      approvedProjects: 2145,
      ongoingProjects: 1205,
      nationalTaxAmount: 23337.03,
      certifiedProjects: 1402,
      incomeTaxDeduction: 3500.56
    };
  }
};
</script>

<style scoped>
.tax-deduction {
  font-family: Arial, sans-serif;
  padding: 20px 0; /* 增加上下的内边距 */
}

.tax-deduction h2 {
  text-align: center; /* 居中标题 */
  margin-bottom: 20px; /* 可选：为标题和内容之间添加一些间距 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.grid-item {
  display: flex;
  align-items: center;
}

.icon-check::before {
  content: '\2713';
  color: green;
  margin-right: 5px;
}

.icon-clock::before {
  content: '\23f2';
  color: orange;
  margin-right: 5px;
}

.icon-cross::before {
  content: '\2717';
  color: red;
  margin-right: 5px;
}

.icon-circle::before {
  content: '\25cf';
  color: blue;
  margin-right: 5px;
}

.icon-star::before {
  content: '\2605';
  color: yellow;
  margin-right: 5px;
}

.icon-check-circle::before {
  content: '\2714';
  color: green;
  margin-right: 5px;
}

.icon-chart::before {
  content: '\2b07';
  color: purple;
  margin-right: 5px;
}

.icon-money::before {
  content: '\24d2';
  color: green;
  margin-right: 5px;
}
</style>
